$(function () {

    var queryObj = {
        proName: $.getQueryString("proName"),
        brandId: "",
        price: "",
        num: "",
        page: 1,
        pageSize: 4
    };

    //3.1.1全局变量  总页数 初始值
    var totalPage = 1;

    init();
    function init() {

        //3.mui自己的初始化
        //mui下来刷新的组件要求的标签结构很像 iscroll.js
        //必须作用于容器内的第一个子元素
        mui.init({
            pullRefresh: {
                container: ".lt_view",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                //3.1下拉更新
                down: {
                    style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                    // color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                    // height: '50px',//可选,默认50px.下拉刷新控件的高度,
                    // range: '100px', //可选 默认100px,控件可下拉拖拽的范围
                    // offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
                    auto: true,//可选,默认false.首次加载自动上拉刷新一次
                    callback: function () {

                        //3.5 重置标签, 重置页码
                        $(".goods_list ul").html("");
                        queryObj.page = 1;

                        //3.2发送请求
                        getQueryProduct(function () {
                            //错误的结束下拉刷新
                            // mui('#refreshContainer').pullRefresh().endPulldown();
                            //3.2.1 正确的结束下拉刷新
                            mui('.lt_view').pullRefresh().endPulldownToRefresh();
                            
                            //3.6重置上啦组件 从hell mui 中找到位置
                            mui('.lt_view').pullRefresh().refresh(true);
                        
                        });
                    } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                },
                //3.3上啦加载
                up: {
                    //显示上啦组件的时候会被调用
                    callback: function () {
                        //3.4判断页码是否满足要求
                        //如果还有数据就传入false 如果没有数据了 传入true 并且 提示没有更多数据了
                        if (queryObj.page >= totalPage) {
                            //没有下一页了
                            // 结束上啦 ,并且 给出用户提示
                            mui('.lt_view').pullRefresh().endPullupToRefresh(true);
                        }else{
                            //正常加载下一页
                            queryObj.page++;
                            getQueryProduct(function () {
                                //结束上啦组件
                                mui('.lt_view').pullRefresh().endPullupToRefresh(false);
                            })
                        }
                    } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        });
    
//调用动态获取数据的函数
// getQueryProduct();
eventList();
}


//绑定一堆数据
function eventList() {
    //点击 排序
    $(".sort_bar").on("tap", "a", function () {
        /* 
        1.只对价格和数量做处理,其他不管
        2.改变被点击的样式
        3.点击价格或者销量 根据被点击值 去改变参数
        */

        var sortkey = $(this).data("sortkey");

        if (!sortkey) {
            return;
        }

        //2.改变span标签的样式
        $(this).find(".fa").toggleClass("fa-angle-down fa-angle-up");

        //3.改变排序的关键字

        //3.1 获取升序和降序
        //判断a标签里面的span 如果 是up类 升序1  否则 降序2
        queryObj.num = "";
        queryObj.price = "";

        if ($(this).find(".fa").hasClass("fa-angle-up")) {
            queryObj[sortkey] = 1;
        } else {
            queryObj[sortkey] = 2;
        }


        //3.7 以前是$().html()  后面改成append追加后,需要先清空
        // 重置标签 重置页码
        $(".goods_list ul").html("");
        queryObj.page = 1;

        getQueryProduct();
    })


    //4.实现点击a标签跳转
    $("body").on("tap","a",function () {
        var href = this.href;
        location.href = href;
    })
}

//发送请求,动态获取数据
function getQueryProduct(callback) {
    $.get(location.origin + "/product/queryProduct", queryObj, function (data) {

        //3.1.2动态获取数据的时候计算总页数
        totalPage = Math.ceil(data.count / queryObj.pageSize);
        console.log(totalPage);
        

        var html = template("mainTpl", { arr: data.data });

        //换成append 追加li标签
        $(".goods_list ul").append(html);

        //3.0.1 传入callback回调参数 调用上拉下拉的代码
        //有就调用, 没有就没事
        callback && callback();
    })
    }
})